<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
	<title>注册状态</title>
	<jsp:include page="../base/header.jsp"></jsp:include>
	<link rel="stylesheet" type="text/css" href="static/ssjf/css/news.css">
	<!-- <script type="text/javascript" src="static/ssjf/js/detail.js"></script>  -->
	<style>
		.form-group{
			width:100%;
		}
		.form-group .col-4{
			text-align:center;
			padding-right:0;
		}
		.form-group .col-8{
			display:inline-block;
			padding-left:0;
		}
		.portrait{
			margin-bottom:1rem;
		}
		.portrait img{
			max-width:100%;
		}
	</style>
</head>
<body style="background-image: url(static/ssjf/img/bg/bg_grey.png);">
	<div class="container" id="header" style="background-color: #f86941;">
		<div class="row title">
			<div class="col-1 col-sm-1 back" onclick="javascript:location.href='ssjf/index.html'"><img src="static/ssjf/img/symbol/back_arrow_w.png"></div>
			<div class="col-10 col-sm-10">注册状态</div>
			<div class="col-1 col-sm-1"></div>
		</div>
	</div>
	<div class="container">
		<div class="row">
			<div class="col-12 nav">
				<ul>
					<li style="width: 50%">我的</li>
					<li class="nav-actived" style="width: 50%">所有</li>
				</ul>
				<div class="clear"></div>
			</div>
		</div>
		<div class="row" id="img-container">
			<div class="col-12">
				<div id="slider" class="carousel slide" data-ride="carousel">
				  <ol class="carousel-indicators">
				  	<c:forEach var="news" items="${newses }" varStatus="vs">
				  		<c:if test="${vs.index == 0 }">
					   		<li data-target="#slider" data-slide-to="0" class="active"></li>
					    </c:if>
					    <c:if test="${vs.index != 0 }">
					   		<li data-target="#slider" data-slide-to="${vs.index }"></li>
					    </c:if>
				    </c:forEach>
				  </ol>
				  <div class="carousel-inner">
				  	<c:forEach var="news" items="${newses }" varStatus="vs">
				  		<c:if test="${vs.index == 0 }">
					   		<div class="carousel-item active">
						      <img class="d-block w-100" src="${news.cover }" alt="${news.title }">
						      <div class="carousel-caption d-md-block">
							    <p>${news.title }</p>
							  </div>
						    </div>
					    </c:if>
					    <c:if test="${vs.index != 0 }">
					   		<div class="carousel-item">
						      <img class="d-block w-100" src="${news.cover }" alt="${news.title }">
						      <div class="carousel-caption d-md-block">
							    <p>${news.title }</p>
							  </div>
						    </div>
					    </c:if>
				    </c:forEach>
				    
				  </div>
				</div>
			</div>
		</div>
	</div>
	<div class="container" id="detail-container">
		<c:forEach var="user" items="${users.results }">
			<div class="row news_bar" value="${user.id }">
				<div class="col-4 news_img"><img src="${user.filePath }"></div>
				<div class="col-8 news_content">
					<div class="row news_title"><div class="col-12">${user.company }</div></div>
					<div class="row news_detail"><div class="col-12">${user.intro }</div></div>
					<div class="row news_other">
						<div class="col-6"></div>
						<div class="col-6"></div>
					</div>
				</div>
			</div>
		</c:forEach>
	</div>
<script>
$(function(){
	let url = window.location.href.split('#');
	if(url[1] == "blue"){
		$("#header").css("background-color","#306aae");
		$(".nav .nav-actived").css("background","initial");
		$(".nav .nav-actived").css("background-color","#306aae");
	}
	$(".news_bar").click(function(){
		var thisId = $(this).attr("value");
		$.post("ssjf/user/me.dat",{id:thisId,fileRemark:'portrait'},function(result){
			result = eval("(" + result + ")");
			if(result.res == 1){
				var val = result.obj;
				$(".back").attr("onclick","javascript:location.href='ssjf/user/allstate.html?val=2'");
				$("#img-container").empty();
				$("#detail-container").empty();
				var imgHtml = '<div class="col-12 portrait"><img src="'+val.filePath+'"></div>';
				var html = '<div class="row"><div class="form-group"><label for="name" class="col-4 control-label">用户名称</label><div class="col-8">';
				html += '<input type="text" class="form-control" id="name" placeholder="用户名称" value="'+val.userName+'" readonly></div></div>';
				html += '<div class="form-group"><label for="telephone" class="col-4 control-label">手机号码</label><div class="col-8">';
				html += '<input type="text" class="form-control" id="telephone" value="'+val.telephone+'" readonly></div></div>';
				html += '<div class="form-group"><label for="company" class="col-4 control-label">公司名称</label><div class="col-8">';
				html += '<input type="text" class="form-control" id="company" value="'+val.company+'" readonly></div></div>';
				html += '<div class="form-group"><label for="credit" class="col-4 control-label">信用积分</label><div class="col-8">';
				html += '<input type="text" class="form-control" id="credit" value="'+val.credit+'" readonly></div></div>';
				html += '<div class="form-group"><label for="userTrade" class="col-4 control-label">用户行业</label><div class="col-8">';
				html += '<input type="text" class="form-control" id="userTrade" value="'+val.userTrade+'" readonly></div></div>';
				html += '<div class="form-group"><label for="userTrade" class="col-4 control-label">用户简介</label><div class="col-8">';
				html += '<textarea class="form-control" id="intro" row=5 readonly>'+val.intro+'</textarea></div></div>';
				html += '</div>';
				$("#img-container").append(imgHtml);
				$("#detail-container").append(html);
			}
		});
	});
	$(".nav ul li").click(function(){
		$(".nav ul li").removeClass("nav-actived");
		$(this).addClass("nav-actived");
		if(url[1] == "blue"){
			$(".nav ul li").css("background","initial");
			$(".nav .nav-actived").css("background-color","#306aae");
		}
		if($(this).index() == 1){
			if(url[1] == "blue"){
				location.href = 'ssjf/user/allstate.html#blue';
			}else location.href = 'ssjf/user/allstate.html?val=2';
		}else{
			$.post("ssjf/user/me",function(result){
				result = eval("(" + result + ")");
				if(result.res == 1){
					var val = result.obj;
					$("#img-container").empty();
					$("#detail-container").empty();
					var imgHtml = '<div class="col-12 portrait"><img src="'+val.filePath+'"></div>';
					var html = '<div class="row"><div class="form-group"><label for="name" class="col-4 control-label">用户名称</label><div class="col-8">';
					html += '<input type="text" class="form-control" id="name" placeholder="用户名称" value="'+val.userName+'" readonly></div></div>';
					html += '<div class="form-group"><label for="telephone" class="col-4 control-label">手机号码</label><div class="col-8">';
					html += '<input type="text" class="form-control" id="telephone" value="'+val.telephone+'" readonly></div></div>';
					html += '<div class="form-group"><label for="company" class="col-4 control-label">公司名称</label><div class="col-8">';
					html += '<input type="text" class="form-control" id="company" value="'+val.company+'" readonly></div></div>';
					html += '<div class="form-group"><label for="credit" class="col-4 control-label">信用积分</label><div class="col-8">';
					html += '<input type="text" class="form-control" id="credit" value="'+val.credit+'" readonly></div></div>';
					html += '<div class="form-group"><label for="userTrade" class="col-4 control-label">用户行业</label><div class="col-8">';
					html += '<input type="text" class="form-control" id="userTrade" value="'+val.userTrade+'" readonly></div></div>';
					html += '<div class="form-group"><label for="userTrade" class="col-4 control-label">用户简介</label><div class="col-8">';
					html += '<textarea class="form-control" id="intro" row=5 readonly>'+val.intro+'</textarea></div></div>';
					html += '</div>';
					$("#img-container").append(imgHtml);
					$("#detail-container").append(html);
				}
			});
		}
	});
});
</script>
</body>
</html>
